import React, { Component } from 'react'
import { getGoodListApi,clearGoodListApi } from "@/api/goods"
import { Radio, SwipeAction, Stepper, TabBar } from 'antd-mobile'
import style from "./index.module.scss"
import qs from "query-string"
import Footer from "@/components/Footer"
export default class index extends Component {
  state = {
    goodCartArr: [],
    isAllCheck: false,
    totalPrice: 0
  }
  componentDidMount() {
    this.getGoodList();

  }
  async getGoodList() {
    let res = await getGoodListApi({
      userid: JSON.parse(sessionStorage.getItem('user-msg')).id
    })

    if (res.data.code === 200) {
      console.log("111", res);
      this.setState({
        goodCartArr: res.data.list
      }, () => { this.totalPrice() })
    }
  }
  async clearGoodList() {
    let res = await clearGoodListApi({
      userid: JSON.parse(sessionStorage.getItem('user-msg')).id
    })
    console.log("shanchu",res);
    // if (res.data.code === 200) {
    //   console.log("111", res);
    //   this.setState({
    //     goodCartArr: res.data.list
    //   }, () => { this.totalPrice() })
    // }
  }
  AddOrReduce = value => {
    console.log(value)
  }
  changeCheck = (value) => {
    console.log(value)
  }
  // 点击之后修改数组中的数据
  radioCheck = (id) => {
    console.log('radioCheck')
    // 01.找到下标
    // let idx=this.state.goodCartArr.findIndex(item=>item.id===id)
    // 02.修改
    let arr = this.state.goodCartArr.map(item => {
      if (item.id === id) {
        item.ischeck = !item.ischeck
      }
      return item
    })
    this.setState({
      goodCartArr: arr,
      isAllCheck: this.state.goodCartArr.every(item => item.ischeck)
    })
    this.totalPrice();
  }
  AllChecked = () => {
    this.setState({
      isAllCheck: !this.state.isAllCheck,
      goodCartArr: this.state.goodCartArr.map(item => {
        item.ischeck = !this.state.isAllCheck;
        return item
      })
    });
    this.totalPrice();
  }
  totalPrice = () => {
    let mony = 0;
    this.state.goodCartArr.forEach(item => {
      mony += item.ischeck ? (item.salesPrice.value * item.count) : 0
    })
    this.setState({
      totalPrice: mony
    })
  }
  deletGoods=()=>{
    this.clearGoodList();

  }
  render() {
    console.log('this.state.goodCartArr', this.state.goodCartArr);
    return (
      <div className={style.goodscart}>
        <div className={style.top}>
          <h1>购物车</h1>
          <p className={style.value}><span>满¥200，享超值换购</span><span className={style.yellow}>立即挑选&gt;</span></p>
          {/* 卡片区域 */}
          <div>
            {this.state.goodCartArr.map(item => (
              <SwipeAction
                key={item.id}
                rightActions={[
                  {
                    key: 'delete',
                    text: '删除',
                    color: 'danger',
                  },
                ]}
                onAction={this.deletGoods}
              >
                <div className={style.card} key={item.id}>
                  <div className={style.radio} >
                    <Radio checked={item.ischeck} onChange={this.changeCheck} onClick={() => this.radioCheck(item.id)}></Radio>
                  </div>
                  <img className={style.img} src={item.pic} />
                  <div className={style.content}>
                    <p className={style.title}>{item.name}</p>
                    <span className={style.barter}>满¥200，超值换购</span>
                    <span className={style.bgred}>{item.salesPrice.value}</span>
                    <div className={style.pan}>
                      <span className={style.red}>¥{(item.salesPrice.value)}</span>
                      <Stepper
                        value={item.count}
                        onChange={this.AddOrReduce}
                      />
                    </div>
                  </div>
                </div>
              </SwipeAction>
            ))}
          </div>
        </div>
        <div className={style.bot}>
          <div><Radio checked={this.state.isAllCheck} onClick={this.AllChecked}>全选</Radio></div>
          <div className={style.botred}>价格¥<span>{(this.state.totalPrice).toFixed(2)}</span></div>
          <div className={style.topay}>去结算</div>
        </div>
        <div className={style.bottom}>
          <Footer></Footer>
        </div>
      </div>
    )
  }
}
